<script type="text/javascript">
    $(document).ready(function () {
        var theme = 'custom';
        var data = <?php echo $menu_json; ?>
        // prepare the data
        var source =
        {
            datatype: "json",
            datafields: [
                {name: 'id'},
                {name: 'parentid'},
                {name: 'text'},
                {name: 'subMenuWidth'}
            ],
            id: 'id',
            localdata: data
        };
        // create data adapter.
        var dataAdapter = new $.jqx.dataAdapter(source);
        // perform Data Binding.
        dataAdapter.dataBind();
        // get the menu items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
        // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
        // specifies the mapping between the 'text' and 'label' fields.  
        var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
        $('#wbMenu').jqxMenu({ source: records, height: 30, theme: theme, width: $(window).width()-2 });
        $("#wbMenu").on('itemclick', function (event) {
        	 $('#content_head_J').html("Id: " + event.args.id + ", Text: " +$(event.args).text());
        	 $.ajax({
        		    type: "POST",
        		    url: "menu_ctrl/show_page",
           		    data: "menu_id="+ event.args.id,
        		    success: function(html){
        		           $("#content_body").html(html);
        		    }
        	 }); 
        });
    });
</script>


